<template>
  <view class="page">
    <!-- 使用公共导航组件 -->
    <CommonNavbar
      :showBack="true"
      bgColor="white"
      title="李明"
    />

    <!-- 主内容区域 -->
    <view class="main">
      <!-- 消息列表为空时的展示 -->
      <!-- <view
        v-if="messageList.length === 0"
        class="empty-state"
      >
        <image
          src="/static/images/icon-empty.png"
          mode="aspectFit"
          class="empty-icon"
        ></image>
        <text class="empty-text">暂无消息</text>
      </view> -->

      <!-- 消息列表 -->
      <!-- <view
        v-else
        class="message-list"
      >
        <view
          v-for="(item, index) in messageList"
          :key="index"
          class="message-item"
        >
          
        </view>
      </view> -->
    </view>

    <!-- 底部工具栏 -->
    <view class="footer bg-white">
      <view class="flex-sub">
        <up-input></up-input>
      </view>
      <view class="margin-left-xs">
        <up-button
          size="mini"
          type="primary"
          text="发送"
        ></up-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 消息列表数据
const messageList = ref([]);

// 获取消息列表
const getMessageList = async () => {
  // TODO: 实现获取消息列表的逻辑
};

// 页面加载时获取数据
onMounted(() => {
  getMessageList();
});
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-bottom: 200rpx;

  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }

  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}

.message-list {
  .message-item {
    padding: 20rpx 0;
    border-bottom: 2rpx solid #f5f5f5;
  }
}
</style>
